<template>
  <div class="kill">
    <div class="color">
      <Header>
        <template slot="left">
          <svg-icon iconClass="back" @click="$router.go(-1)"></svg-icon>
        </template>
        <template slot="center">
          <p>秒杀</p>
        </template>
        <template slot="right">
          <p style="visibility:hidden">秒杀</p>
        </template>
      </Header>
      <div class="tabbar">
        <p
          v-for="(item,index) in timerList"
          :key="index"
          @click="barActive=index"
          :class="index==barActive?'active':''"
        >
          <span>{{item.time}}</span>
          <span>{{item.title}}</span>
        </p>
      </div>
    </div>
    <div class="live">
      <div class="position">
        <h1>
          实施热抢
          <span>4s后换一批</span>
        </h1>
        <div class="hot">
          <dl v-for="item in foreList" :key="item.id">
            <dt>
              <img src="@/img/1.png" alt="">
            </dt>
            <dd>￥{{ item.money }}</dd>
          </dl>
        </div>
      </div>
    </div>
    <main>
      <div class="null"></div>
      <div class="shop_list">
        <div class="shop_item" v-for="item in allList" :key="item.id">
          <dl>
            <dt>
              <img src="@/img/1.png" alt="">
            </dt>
            <dd>
              <div class="h2">{{ item.title }}</div>
              <h3>
                <span>自营</span>
                {{ item.text }}
              </h3>
              <p>
                <span class="all_money">
                  <span class="money">￥{{ item.money }}</span>
                  <span class="last_money">￥{{ item.lastMoney }}</span>
                </span>
              </p>
              <div class="pay_and">
                <div class="jdt">
                  <van-progress :pivot-text="item.JD+'%'" color="#ee0a24" :percentage="item.JD"/>
                </div>
                <p class="btn">
                  <button>立即抢购</button>
                </p>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <van-divider
        v-if="lineTip"
        :style="{ color: '#f73e2b', borderColor: '#f8582a', padding: '0 16px' }"
      >到底了</van-divider>
    </main>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { clearTimeout } from 'timers'
export default {
  data() {
    return {
      foreList: [], //四个动态商品
      allList: [], //商品列表
      activeNum: 0, //下拉加载时截取数据的开始下标
      lineTip: false, //到底了
      listTimer: null, //下拉加载定时器
      timerList: [
        { time: '10:00', title: '已开抢' },
        { time: '11:00', title: '抢购进行中' },
        { time: '12:00', title: '即将开抢' },
        { time: '13:00', title: '即将开抢' },
      ],
      barActive: 0,
    }
  },
  created() {
    this.$api.killshop().then((res) => {
      this.foreList = res.list
    })
    this.allListAdd()
    this.scroll()
  },
  destroy() {
    clearTimeout(this.listTimer) //清除定时器
  },
  methods: {
    //像列表添加5条数据
    allListAdd() {
      this.$api.allkill().then((res) => {
        let resLength = res.list.length
        let five = res.list.splice(this.activeNum, 5)
        five.forEach((item) => {
          this.allList.push(item)
        })
        this.activeNum += 5
        if (this.activeNum >= resLength) {
          this.lineTip = true
        }
      })
    },
    scroll() {
      window.onscroll = () => {
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop
        //变量windowHeight是可视区的高度
        let windowHeight =
          document.documentElement.clientHeight || document.body.clientHeight
        //变量scrollHeight是滚动条的总高度
        let scrollHeight =
          document.documentElement.scrollHeight || document.body.scrollHeight
        if (scrollTop + windowHeight == scrollHeight) {
          Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration: 800,
          })
          this.listTimer = setTimeout(() => {
            this.allListAdd()
          }, 800)
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@css/style.scss';
.kill {
  width: 100%;
  height: 100%;
  .color {
    background: linear-gradient(to right, #f62c2c, #f86329);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .tabbar {
    .active {
      color: #fff;
      font-size: px2rem(16);
    }
    width: 100%;
    height: px2rem(50);
    font-size: px2rem(15);
    color: #ccc;
    background: linear-gradient(to right, #f62c2c, #f86329);
    display: flex;
    justify-content: space-around;
    p {
      display: flex;
      text-align: center;
      flex-direction: column;
    }
  }
  .live {
    margin-top: px2rem(100);
    width: 100%;
    height: px2rem(50);
    background: linear-gradient(to right, #f62c2c, #f86329);
    position: relative;
    .position {
      width: 95%;
      background: #fff;
      border-radius: px2rem(10);
      position: absolute;
      left: 50%;
      top: px2rem(10);
      transform: translate(-50%);
      padding: 10px;
      h1 {
        font-size: px2rem(20);
        font-weight: 700;
        span {
          font-size: px2rem(15);
          color: #999;
          margin-left: 10px;
          font-weight: 100;
        }
      }
      .hot {
        width: 100%;
        display: flex;
        justify-content: space-between;
        dl {
          width: 24%;
          margin: px2rem(15) 0;
          dt {
            width: 100%;
            margin: px2rem(10) 0;
            display: flex;
            justify-content: center;
            img {
              /* width: 80%; */
              height: 100%;
              background: #000;
            }
          }
          dd {
            font-size: px2rem(16);
            color: red;
            text-align: center;
          }
        }
      }
    }
  }
  main {
    width: 100%;
    background: rgb(209, 209, 209);
    padding-bottom: px2rem(20);
    .null {
      width: 100%;
      height: px2rem(165);
    }
    .shop_list {
      width: 95%;
      margin: 0 auto;
      .shop_item {
        background: #fff;
        border-radius: px2rem(10);
        padding: px2rem(15) px2rem(10);
        width: 100%;
        margin-bottom: px2rem(20);
        dl {
          width: 100%;
          height: 100%;
          font-size: px2rem(16);
          display: flex;
          dt {
            color: skyblue;
            width: px2rem(85);
            margin-right: px2rem(10);
            img {
              width: px2rem(85);
              height: px2rem(85);
            }
          }
          dd {
            flex: 1;
            margin: 0 px2rem(10);
            color: #333;
            .h2 {
              word-break: break-all;
              text-indent: px2rem(5);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            h3 {
              color: #6664a5;
              span {
                background: red;
                color: #fff;
                padding: px2rem(3) px2rem(5);
                margin-right: px2rem(10);
              }
              line-height: px2rem(25);
              margin: px2rem(10) 0;
              font-size: px2rem(14);
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            p {
              display: flex;
              justify-content: space-between;
              margin: px2rem(15) 0;
              .money {
                font-size: px2rem(20);
                color: red;
              }
              .last_money {
                color: #888;
                text-decoration: line-through;
                margin-left: px2rem(5);
              }
              button {
                margin-top: px2rem(10);
                border: px2rem(1) solid red;
                outline: 0;
                color: red;
                font-size: px2rem(10);
                padding: px2rem(5) px2rem(10);
                border-radius: px2rem(50);
                background: #fff;
              }
            }
            .pay_and {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .jdt {
                width: px2rem(100);
                margin: px2rem(10) 0;
              }
              .btn {
                margin: 0;
                padding: 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>
